<template>
  <div class="container">
    <div style="padding:10px 0;">
      <div style="padding:15px;border:1px solid #eee;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/kecheng' }">课程列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ titleText }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
   
    <!-- <div class="list-group">
      <el-row :gutter="3">
        <el-col :span="3">
          <div class="list-title"> 课程分类:</div>
        </el-col>
        <el-col :span="3">
          <el-select v-model="modelList.kcid.value" placeholder="请选择">
            <el-option v-for="item in xueqi" :key="item.sid" :label="item.sname" :value="item.sid">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div> -->
   
    <div class="list-group"  v-if="kcname !=''">
      <el-row :gutter="3">
        <el-col :span="3">
          <div class="list-title">课程名称:</div>
        </el-col>
        <el-col :span="5">
          {{  kcname}}
        </el-col>
      </el-row>      
    </div>   

    <div class="list-group" v-if="kcname ==''">
      <el-row :gutter="3">
        <el-col :span="3">
          <div class="list-title">选择赠送的课程:</div>
        </el-col>
        <el-col :span="5">
          <el-select v-model="modelList.kcid.value" placeholder="请选择">
            <el-option v-for="item in kechenglist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>      
    </div>     

    <div class="list-group"  v-if="tname !=''">
      <el-row :gutter="3">
        <el-col :span="3"> 
          <div class="list-title">教师姓名:</div>
        </el-col>
        <el-col :span="5">
          {{  tname}}
        </el-col>
      </el-row>
    </div>


    <div class="list-group" v-if="tname ==''">
      <el-row :gutter="3">
        <el-col :span="3"> 
          <div class="list-title">教师姓名:</div>
        </el-col>
        <el-col :span="5">
          <el-select v-model="modelList.tid.value" placeholder="请选择">
            <el-option v-for="item in teachers" :key="item.id" :label="item.tname" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>

 
 

 

    <!-- <div class="list-group">
      <el-row :gutter="3">
       

        <el-col :span="2">
          <div class="list-title"> 是否显示:
          </div>
        </el-col>
        <el-col :span="5">
          <el-radio-group v-model="modelList.is_show.value">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-col>

      </el-row>
    </div> -->

    
    <div class="list-group"> 

      <el-row :gutter="10">
        <el-col :span="3">
          <div class="list-title">课程编号:
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="modelList.nub.value" :placeholder="modelList.nub.placeholder"></el-input>
        </el-col>
        
        <el-col :span="2">
          <div class="list-title"> 课表id:
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="modelList.lnub.value" :placeholder="modelList.lnub.placeholder"></el-input>
        </el-col>
      </el-row>
      </div>

     

    <div class="list-group"> 

      <el-row :gutter="10">
        <el-col :span="3">
          <div class="list-title">课节名称:
          </div>
        </el-col>
        <el-col :span="10">
          <el-input v-model="modelList.name.value" :placeholder="modelList.name.placeholder"></el-input>
        </el-col>
      </el-row>
    </div>

 



    <div class="list-group">
      <el-row :gutter="3">
        <el-col :span="3">
          <div class="list-title">类型:
          </div>
        </el-col>
        <el-col :span="3">
          <el-select v-model="modelList.type.value" placeholder="请选择">
            <el-option v-for="item in typearr" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <!-- <el-input v-model="modelList.type.value" :placeholder="modelList.type.placeholder" type="number"></el-input> -->
          <!-- <p style="color:red">输入整数,数字越大排名越靠前</p> -->
        </el-col>


        <el-col :span="2">
          <div class="list-title">限时免费:
          </div>
        </el-col>
      
        <el-col :span="5">
          <el-radio-group v-model="modelList.is_free.value">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-col>

      </el-row>
     </div>


         <div class="list-group">

          <el-row :gutter="10">
              <el-col :span="3">
                  <div class="list-title">免费时间: </div>
                </el-col>
                <el-col :span="3">
                      <el-date-picker
                          type="date"
                          placeholder="选择日期"
                          v-model="modelList.free_tiem.value"
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"
                      ></el-date-picker>
 

                  </el-col>
                 
                </el-row>
          </div>



     <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title">音频封面图:</div>
        </el-col>
        <el-col :span="21">
          <img-upload :img-url.sync="modelList.audio_img.value"></img-upload>
    
        </el-col>
      </el-row>
    </div> 


    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title">导读1:</div>
        </el-col>
        <el-col :span="21">
          <img-upload :img-url.sync="modelList.daodu1.value"></img-upload>
    
        </el-col>
      </el-row>
    </div> 

 

    <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title">是否置顶:</div>
        </el-col>
        <el-col :span="5">
          <el-radio-group v-model="modelList.istop.value">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
          </el-radio-group>
                    <!-- <p style="color:blue">是否参与特定活动赠送免费课程</p> -->
        </el-col>


        <!-- <el-col :span="3">
          <div class="list-title"><span class="mast-icon"></span>选择赠送的课程:</div>
        </el-col>
        <el-col :span="8">
          <el-select v-model="modelList.kcsendid.value" placeholder="请选择">
            <el-option v-for="item in kechenglist" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col> -->

      </el-row>
 
    </div>

  
 
 
     <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>状态:</div>
        </el-col>
        <el-col :span="21">
          <el-radio-group v-model="modelList.status.value">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div> -->
  

 
     

    <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>禁用/启用:</div>
        </el-col>
        <el-col :span="21">
          <el-switch v-model="modelList.status.value" active-text="禁用" inactive-text="启用">
          </el-switch>
        </el-col>
      </el-row>
    </div> -->
 
   <!-- <div class="list-group">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title"> 课程大纲:</div>
        </el-col>
        <el-col :span="19">
          <div>
            <vue-editor :content="modelList.dagang.value" ref="myTextIntro"></vue-editor>
          </div>
           
        </el-col>
      </el-row>
    </div> -->
 
    <div class="list-group" v-if="!judge"
      style="display:flex;flex-direction: row;justify-content: center;margin-top:40px;">
      <el-button size="medium" @click="cancel" style="margin-right:40px;">取 消</el-button>
      <el-button size="medium" type="primary" @click="preserve">确 定</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';
import vueEditor from '@/components/views/commons/VueUeditorWrap';
import imgUpload from '@/components/views/commons/ImgUpload.vue';
import ImgUploadList from '@/components/views/commons/ImgUploadList.vue';
export default {
  name: 'positionAdd',
  components: {
    vueEditor, imgUpload,ImgUploadList
  },
  data: function () {
    return {
      zzTypeist: [],
      cateIdArr: [],
      teachers: [],
      xueqi: [],
      kechenglist: [],
      typearr: [],
      tagsVal: '',
      tagsShwo: false,
      gridData: [],
      thumblist: [],
      imgLoadPath: api.API_PATH + api.LOGIN_IMG,
      docLoadPath: api.IMG_PATH,
      videoLoadPath: api.API_PATH + api.UPLOAD_VIDEO,
      videoLoadSrc: api.VIDEO_PATH,
      pageName: '',
      createTime: '',
      ht_names: '',
      createPerson: '',
      modelList: {        
        "tid": { value: '', request: false, name: '老师id', placeholder: '请输入排序', type: 'input' },
        "kcid": { value: '', request: false, name: '课程id', placeholder: '请输入排序', type: 'input' },
        "nub": { value: '', request: false, name: '课程编号', placeholder: '请填写内容', type: 'input' }, 
       "lnub": { value: '', request: false, name: '课表id', placeholder: '请填写内容', type: 'input' },
       "name": { value: '', request: false, name: '课节名称', placeholder: '请输入', type: 'input' },
       "type": { value: '', request: false, name: '类型', placeholder: '请输入', type: 'input' },
        
       "is_free": { value: '', request: false, name: '限时免费', placeholder: '请填写内容', type: 'input' },
       "free_tiem": { value: '', request: false, name: '限免', placeholder: '请填写内容', type: 'input' },
      
       
       "audio_img": { value: '', request: false, name: '音频封面图', placeholder: '请填写内容', type: 'input' },
        "daodu1": { value: '', request: false, name: '导读1', placeholder: '请输入内容', type: 'input' },
        "istop": { value: '', request: false, name: '是否置顶', placeholder: '请输入内容', type: 'input' },
          // "cate_id": { value: '', request: false, name: '', placeholder: '', type: 'input' }, 
         
        // "status": { value: false, request: false, name: '状态', placeholder: '请输入内容', type: 'input' },
        
        "start": { value: '', request: false, name: '时间1', placeholder: '请输入内容', type: 'input' },
        "end": { value: '', request: false, name: '时间2', placeholder: '请输入内容', type: 'input' },
       },
      judge: false,
      titleText: '',
      tid: '',
      kcid: '',
      id: '',      
      type: '',
      title: '', 
      kcname:'',
      tname:'' 
    };
  },
  watch: {
    'modelList.path_type.value': function (val, old) {
      if (val === 0) {
        // this.modelList.content.request = false;
    
      } else if (val === 1) {
        // this.modelList.content.request = true;
       
      } else if (val === 2) {
        // this.modelList.content.request = false;
 
      }
    }
  },
  mounted() {
    this.type = this.$route.query.type;//查看类型
    this.id = this.$route.query.id;//付款记录id
    if(this.$route.query.tid&&this.$route.query.kcid){
      this.tid = this.$route.query.tid;//付款记录id 
      this.kcid = this.$route.query.kcid;//查看类型
      this.kcname = this.$route.query.kcname;//查看类型
      this.tname = this.$route.query.tname;//查看类型
    }else{
      this.tid =0;
      this.kcid =0;
    }

    
    if (this.type == 1) {
      this.titleText = "新增";
    } else if (this.type == 2) {
      this.judge = false;
      this.titleText = "编辑";
      this.initAjaxDetail();
    } else if (this.type == 3) {
      this.initAjaxDetail();
      this.judge = true;
      this.titleText = "查看";
    }

    console.log(222,this.tid)
 
 
    // let typearr1='[{"id":0,"name":"请选择"},{"id":1,"name":"音频"},{"id":2,"name":"视频"},{"id":3,"name":"音视频"}]';
    let typearr1='[{"id":0,"name":"请选择"},{"id":1,"name":"音频"}]';
    
    
    this.typearr=JSON.parse(typearr1);
 
    //  this.ohterAjaxMethd();
   
    
     if(this.tid && this.kcid){
       console.log("sfdsdf",this.tid,"f",this.kcid)
      this.modelList.tid.value =this.tid;  
      this.modelList.kcid.value =this.kcid;
    }else{
      this.TeacherListAjaxMethd();
    // //  this.KctypeListAjaxMethd();
     this.KcchlidListAjaxMethd();
    }


   
  },
  methods: {
    delVideo() {
      this.modelList.video_path.value = '';
    },
    tagInputMethod() {
      if (this.tagsVal.trim() !== '') {
        this.tags.push(this.tagsVal);
        this.tagsVal = '';
      }
      this.tagsShwo = false;
    },
    tagClose(index) {
      this.tags.splice(index, 1);
    },
    //保存
    preserve() {
    console.log(this.type);
      if (this.type == 1) {
        this.addAjaxMethod();
      } else if (this.type == 2) {
        this.editAjaxMethod();
      }

    },
    //取消
    cancel() {
      this.$router.back();
    },
    //详细信息api
    initAjaxDetail() {
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.kcbiao_DETAIL, { id: this.id })
        .then((res) => {
          console.log('res', res);
          loading.close();
          if (res.code == 1) {      
            this.modelList.tid.value = res.data.tid; 
            this.modelList.kcid.value = res.data.kcid; 
            this.modelList.nub.value = res.data.nub;
            this.modelList.lnub.value = res.data.lnub;          
            this.modelList.name.value = res.data.name; 
            this.modelList.type.value = res.data.type; 
            this.modelList.is_free.value = res.data.is_free;
            this.modelList.free_tiem.value = res.data.free_tiem;
            this.modelList.audio_img.value = res.data.audio_img;
            this.modelList.daodu1.value = res.data.daodu1;
            this.modelList.istop.value = res.data.istop;
            // this.modelList.start.value = res.data.start;
            // this.modelList.end.value= res.data.end;
            // this.modelList.cate_id.value = res.data.cate_id;
             // this.modelList.kcsendid.value = res.data.kcsendid==""?"":res.data.kcsendid;
            // this.cateIdArr = res.data.cate_parent_ids ? (Array.isArray(res.data.cate_parent_ids.split(',')) ? res.data.cate_parent_ids.split(',') : []) : [];
            // this.cateIdArr.map(item => Number(item))        
            // this.modelList.proceedingendtime.value = Object.prototype.toString.call(res.data.proceedingendtime) === "[object String]" ? res.data.proceedingendtime : '';
           // this.modelList.status.value = res.data.status == 0 ? false : true;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    ohterAjaxMethd() {
      this.modelList.cate_id.value = '';
      this.cateIdArr = [];
      
       
      this.$http.post(api.goods_CATE_LIST, { 'openid': 11 })
        .then((res) => {
          console.log('城市列表', res);
          if (res.code == 1) {
             this.cateIdArr = Array.isArray(res.data) && res.data.length > 0 ? res.data : '';
           
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    // 老师列表
    TeacherListAjaxMethd() {
      // this.modelList.tid.value = '';
      this.teachers = [];           
      this.$http.post(api.getTeacherList, { 'openid': 11 })
        .then((res) => {
         
          if (res.code == 1) {
             this.teachers = Array.isArray(res.data) && res.data.length > 0 ? res.data : '';
        
            //  console.log('城市列表11111', this.teachers);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 课程分类
    KctypeListAjaxMethd() {
      // this.modelList.kcid.value = '';
      this.xueqi = [];           
      this.$http.post(api.getKctypeList, { 'openid': 11 })
        .then((res) => {
          console.log('城市列表 xueqi', res);
          if (res.code == 1) {
             this.xueqi = Array.isArray(res.data) && res.data.length > 0 ? res.data : '';
           
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },

    // 课程列表 子内容
    KcchlidListAjaxMethd() {
      // this.modelList.kcsendid.value = '';
      this.modelList.kcid.value = '';
      this.kechenglist = [];           
      this.$http.post(api.getKcchlidList, { 'openid': 11 })
        .then((res) => {
          console.log('城市列表', res);
          if (res.code == 1) {
             this.kechenglist = Array.isArray(res.data) && res.data.length > 0 ? res.data : '';
           
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //编辑
    editAjaxMethod() {
      //验证
      let test = this.testMethod();
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      } else {
        test.data.id = this.id;
      }
      console.log('test.data', test.data);
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.kcbiao_EDIT, test.data)
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('编辑成功');
            setTimeout(() => {
              // this.$router.push({ path: '/kecheng' });
              this.$router.push({ path: '/kcbiao' });
              
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //新增api
    addAjaxMethod() {
      //验证
      let test = this.testMethod();
      console.log('test.data', test.data);
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      }
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.kcbiao_ADD, test.data)
        .then((res) => {
          loading.close();
          if (res.code == 1) {
            this.$message.success('添加成功');
            setTimeout(() => {
              this.$router.push({ path: '/kcbiao' });
            }, 1000);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //验证方法
    testMethod() {
      let flag = true, msg = '', data = {};
      //  this.modelList.dagang.value = this.$refs['myTextIntro'].getContent();
      // this.modelList.skill.value = this.tags.join(',')
      // this.modelList.thumb.value = this.modelList.thumb.value.join(','); // 多图上传
      // this.modelList.thumblist.value = this.modelList.thumblist.value.join(','); // 多图上传
      // this.thumblist1 = this.modelList.thumblist.value.join(',');
      // let cateIdArr = this.cateIdArr.join(',')
      for (let i in this.modelList) {
        if (this.modelList[i].request) {
          if (!this.modelList[i].value || this.modelList[i].value == '') {
            flag = false;
            msg = this.modelList[i].placeholder;
            break;
          }
        }
      }
      if (flag) {
        data = {       
          "tid": this.modelList.tid.value,
          "kcid": this.modelList.kcid.value,         
          "nub": this.modelList.nub.value,
          "lnub": this.modelList.lnub.value,
          "name": this.modelList.name.value, 
          "type": this.modelList.type.value,   
          "is_free":this.modelList.is_free.value,
          "free_tiem":this.modelList.free_tiem.value,
          "audio_img": this.modelList.audio_img.value,
          "daodu1": this.modelList.daodu1.value,
          "istop": this.modelList.istop.value, 
        };
      }
      return { flag: flag, msg: msg, data: data };
    },
    //预登记headerpc头部 
    handleHeaderSuccess(res, file) {
      console.log(res);
      if (res.code == 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        });
        return false;
      }
      this.modelList.thumb.value = res.data;
      this.modelList.thumblist.value = res.data;
    },
    handleHeaderSuccess1(res, file) {
      console.log(res);
      if (res.code == 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        });
        return false;
      }
      this.modelList.banner_thumb.value = res.data;
    },
    beforeHeaderUpload(file) {
      var FileExt = file.name.replace(/.+\./, '');
      if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传jpg,jpeg,png,gif,bmp格式文件！'
        });
        return false;
      }
    },
    videoHeaderSuccess(res, file) {
      this.videoLoading.close();
      if (res.code == 0) {
        this.$message({
          type: 'warning',
          message: res.msg
        });
        return false;
      }
      this.$message.success('上传成功');
      this.modelList.video_path.value = res.data;
    },
    videoHeaderUpload(file) {
      var FileExt = file.name.replace(/.+\./, '');
      if (['mp4', 'mpeg', 'mov', 'm4v', '3gp', 'avi', 'm3u8'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传mp4、mpeg、mov、m4v、3gp、avi、m3u8文件！'
        });
        return false;
      }
      const fileSize = this.fileSize(file.size, 'm', 50);
      if (fileSize.code == 0) {
        this.$message({
          type: 'warning',
          message: fileSize.msg
        });
        return false;
      }
      this.videoLoading = this.$loading({ text: '上传中...' });
    },
    fileSize(fileSize, unit, size = 0) {
      let total = 0;
      if (unit == 'm') {
        total = fileSize / 1024 / 1024;
      } else if (unit == 'kb') {
        total = fileSize / 1024;
      }
      if (total > size) {
        return { code: 0, msg: '文件大小请控制在' + size + unit + '以内!' };
      }
      return { code: 1 };
    },
  }
};
</script>


<style scoped>
.list-title {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #333;
}

.list-group {
  padding: 10px 0;
}

.del-video-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}

h2 {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
}

h2:after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #409eff;
}

.map-group {
  position: relative;
}

.map-search {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px;
  width: 400px;
  background: #fff;
  z-index: 300;
}

.map-search input {
  height: 40px;
  border: 1px solid #eee;
  font-size: 14px;
  color: #888;
  flex-grow: 1;
  outline: none;
}

.serarch-result {
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  box-shadow: 1px 1px 4px -3px #000;
  background-color: #fff;
  max-height: 300px;
}

.serarch-list {
  border-bottom: 1px solid #eee;
}

.serarch-list:hover {
  cursor: pointer;
  background-color: #eee;
}

.serarch-rows {
  display: flex;
  padding: 6px 10px;
  font-size: 14px;
  color: #333;
  align-items: center;
}

.serarch-rows span:nth-child(1) {
  margin-right: 10px;
}
</style>
